<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" /> 
  <meta name="Keywords" content="" /> 
  <meta name="description" content="" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
  <meta content="width=640,target-densitydpi=device-dpi,user-scalable=no" name="viewport" /> 
  <title>神探闯关</title> 
  <link type="text/css" rel="stylesheet" href="css/style.css" /> 
  <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
 </head>
 <body>
     
<!--    游戏失败__人生36计不如再来一击-->
  <div class="submit_success game_fail"> 
   <div class="submit_success_con center success_p"> 
    <div class="submit_success_close right">
     <img src="images/info_close.png" />
    </div> 
    <div class="clear"></div> 
    <p><img src="images/game2_fail1.png" /></p>     
    <p class="submit_success_close"><img src="images/yes.jpg" /> </p> 
   </div> 
  </div>
   
  <!--    游戏失败__手一抖，密码错了-->
  <div class="submit_success game_fail"> 
   <div class="submit_success_con center success_p"> 
    <div class="submit_success_close right">
     <img src="images/info_close.png" />
    </div> 
    <div class="clear"></div> 
    <p><img src="images/game2_fail2.png" /></p>     
    <p class="submit_success_close"><img src="images/yes.jpg" /> </p> 
   </div> 
  </div>
     
<!--    游戏失败__换个姿势，找找感觉-->
<div class="submit_success game_fail"> 
   <div class="submit_success_con center success_p"> 
    <div class="submit_success_close right">
     <img src="images/info_close.png" />
    </div> 
    <div class="clear"></div> 
    <p><img src="images/game2_fail3.png" /></p>     
    <p class="submit_success_close"><img src="images/yes.jpg" /> </p> 
   </div> 
  </div>
<!--    游戏失败__快求神探附体-->
<div class="submit_success game_fail"> 
   <div class="submit_success_con center success_p"> 
    <div class="submit_success_close right">
     <img src="images/info_close.png" />
    </div> 
    <div class="clear"></div> 
    <p><img src="images/game2_fail3.png" /></p>     
    <p  class="submit_success_close"><img src="images/yes.jpg" /> </p> 
   </div> 
  </div>
     
<!--    游戏失败__五次都没闯关成功-->
  <div class="submit_success game_fail"> 
   <div class="submit_success_con center success_p"> 
    <p><img src="images/game2_fail.png" /></p>
   </div> 
  </div>
<!--    游戏失败__五次机会还没用完-->
  <div class="submit_success game_fail"> 
   <div class="submit_success_con center success_p"> 
    <p><img src="images/game2_fail5.png" /></p>
   </div> 
  </div>
<!--游戏成功——点击成功获取密码后跳转到成功页面-->
  <div class="submit_success game_fail"> 
   <div class="submit_success_con center success_p"> 
    <div class="submit_success_close submit_success_closeok right">
     <img src="images/info_close.png" />
    </div> 
    <div class="clear"></div> 
    <p><img src="images/big_win.png" /></p>     
    <p style="margin-top:-145px;"><a href=success2.html><img src="images/go_success.jpg" /></a></p> 
   </div> 
  </div>   
  
  <div class="warp"> 
   <header> 
    <div class="game1_header"> 
     <div class="left"> 
      <img src="images/index_logo.png" width="188" /> 
     </div> 
     <div class="left"> 
      <img src="images/start_2.png" width="392" /> 
     </div> 
    </div> 
   </header> 
   <div class="game2_screen">
       <div class="screen_light">
            <img src="images/1.png" id="show">
       </div>
       <div class="game2_lp">
            <span>剩余次数</span>
            <ul class="game2_lp_ul">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
       </div>
       <div class="three_page">
        <div class="page page1" style="-webkit-animation-duration: 3s; animation-duration: 3s;">
            <img src="images/page1.png">
        </div>
           <div class="page page2" style="-webkit-animation-duration: 3s; animation-duration: 3s;">
            <img src="images/page2.png">
        </div>
           <div class="page page3" style="-webkit-animation-duration: 3s; animation-duration: 3s;">
            <img src="images/page3.png">
        </div>
       </div>
       <div class="three_result">
            <div class="result1"><img src="images/page3.jpg"><img src="images/page4.jpg"><img src="images/page2.jpg"></div>
            <div class="result2"><img src="images/page3.jpg"><img src="images/page4.jpg"><img src="images/page2.jpg"></div>
            <div class="result3"><img src="images/page3.jpg"><img src="images/page4.jpg"><img src="images/page2.jpg"></div>
       </div>
       <div class="game2_handle" style="-webkit-animation-duration: 1s; animation-duration: 1s;">
        <img src="images/gamehandle.png" id="game2_handle">
       </div>
       <div class="shake_light shake_light1">
        <img src="images/red_light.png">
        <img src="images/red_light.png">
        <img src="images/red_light.png">
        <img src="images/red_light.png">
        <img src="images/red_light.png">
       </div>
       <div class="shake_light shake_light2">
        <img src="images/red_light.png">
        <img src="images/red_light.png">
        <img src="images/red_light.png">
        <img src="images/red_light.png">
        <img src="images/red_light.png">
       </div>
   </div>
  </div>

     <script type="text/javascript">
         $(window).load(function(){
         var lp = 5;//开始生命值 5  
         var light = 0;
         var light2 = 0;
         // 返回一个a~b的随机数整数
         function randomNumber(a,b){
            var c= b-a+1;
            return Math.floor(Math.random()*c+a);             
         }      
         
//        拉霸被拉动后
         $('#game2_handle').draggable({
                        opacity:0.5,
                        revert:true,
                        axis:"y",
                        containment:"parent",
                    start:function(){
                        $(".three_result>div").fadeOut();
                    },
                    drag:function(){
                        $(this).css("opacity","1");
                        
                        
                    },
                    stop:function(){
                        $(this).css("opacity","1");                        
                  
                        //每次拉动手柄生命减一
                        lp--;
                        $(".game2_lp_ul").children("li:last-child").remove();
                        
                        // 第一个开始转动
                        $(".page1 img").css({'top':'-4000px'}).animate({'top':'0'},4000);
                        
                        // 1s之后第二个开始转动
                        setTimeout(function(){
                            $(".page2 img").css({'top':'-2070px'}).animate({'top':'0'},3000);
                        },1000);
                        
                        // 2s之后第三个开始转动
                        setTimeout(function(){
                            $(".page3 img").css({'top':'-2070px'}).animate({'top':'0'},2000);
                        },2000);
                        
                        var result1 = randomNumber(1,4);
                        var result2 = randomNumber(1,4);
                        var result3 = randomNumber(1,4);
                        
                        // 结果1显示
                        setTimeout(function(){                            
                            var prev = result1-1;
                            var next = result1+1;
                            $(".result1 img").eq(0).attr("src","images/page"+prev+".jpg");
                            $(".result1 img").eq(1).attr("src","images/page"+result1+".jpg");
                            $(".result1 img").eq(2).attr("src","images/page"+next+".jpg");
                            $(".result1").show();
                        },3900);
                        
                        // 结果2显示
                        setTimeout(function(){                            
                            var prev = result2-1;
                            var next = result2+1;
                            $(".result2 img").eq(0).attr("src","images/page"+prev+".jpg");
                            $(".result2 img").eq(1).attr("src","images/page"+result2+".jpg");
                            $(".result2 img").eq(2).attr("src","images/page"+next+".jpg");
                            $(".result2").show();
                        },3900);
                        
                        // 结果3显示
                        setTimeout(function(){                            
                            var prev = result3-1;
                            var next = result3+1;
                            $(".result3 img").eq(0).attr("src","images/page"+prev+".jpg");
                            $(".result3 img").eq(1).attr("src","images/page"+result3+".jpg");
                            $(".result3 img").eq(2).attr("src","images/page"+next+".jpg");
                            $(".result3").show();
                            setTimeout(function(){
                                result();
                            },1000);
                        },3900);
                        
                        //显示游戏闯关是否成功的提示
                        function result(){
                            if(result1 == result2 && result2 == result3 ){
                                $(".submit_success").eq(5).show();  //游戏闯关成功
                            }else{
                                if(lp!=0){
                                    $(".submit_success").eq(randomNumber(0,3)).show();//闯关失败但是还有生命值
                                }else{
                                    $(".submit_success").eq(4).show();  //闯关失败而且没有生命值
                                }
                            }                         
                        }
                        
                    }
                    });
         
              //  提示框关闭效果
              $(".submit_success_close").click(function(){
                $(".submit_success").hide();
              });
              $(".submit_success_closeok").click(function(){
               document.location.href = "success2.html"; 
              });
             
             // 游戏机四周的循环滚动闪光
             var i=0; 
             setInterval(function(){
               i=(i+1)%2;
               document.getElementById("show").src="images/"+(i+1)+".png";
             },400);
             
             
             //页面进入后手柄示意下拉
             $(".game2_handle").animate({'top':'140px'},1000).animate({'top':'0px'},500);
             
             //手柄附近的红绿灯循环闪烁
             setInterval(function(){
                $(".shake_light1 img").eq(light).attr("src","images/green_light.png");
                $(".shake_light2 img").eq(light).attr("src","images/green_light.png");
                light++;
             },125);
//             setTimeout(function(){
//                setInterval(function(){
//                    $(".shake_light1 img").eq(light2).attr("src","images/red_light.png");
//                    $(".shake_light2 img").eq(light2).attr("src","images/red_light.png");
//                    light2++;
//                 },500);                 
//             },500);
             
             setInterval(function(){
                    $(".shake_light1 img").eq(light2).attr("src","images/red_light.png");
                    $(".shake_light2 img").eq(light2).attr("src","images/red_light.png");
                    light2++;
                 },125);   
             setInterval(function(){
                light = 0;
             },750);
             setInterval(function(){
                light2 = 0;
             },875);
            
      });
     </script>
     <script type="text/javascript">

    </script>
 </body>
</html>